﻿<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">    
    <title>Nodejs DataPipe</title>
<style>
    .mainLogo{
    padding: 50px;
    background-color:#319616;
    font-size: 36px;
    text-align: center;
    color: #f5f1ee;
    font-weight: 600;
    }
    h1{color:#1b7d01;}
    body{margin:0px;}
</style>
  </head>
  <body>
   <div>
    <div class="mainLogo" style="text-align:left;">
        <span>DataPipe / 数据管道传输</span> <span style="float:right;">Node.js+MongoDB</span>
    </div>
    <div style="margin:0px auto;width:800px;border:1px solid #ddd;border-top:0px;padding:10px 100px;background-color:#fff;padding-bottom:30px;margin-bottom:30px;">
        <div>
            <h1>调用API说明</h1>
        </div>
        <div>
            <div>
                <h3>调用测试</h3>
            </div>
            <div>
                ActionCode: <br /><input type="text" value="private_getUsers" id="actionname" style="width:800px;height:30px;" />
            </div>
            <div>
                MetaData: <br /> <textarea rows="8" id="MetaData" style="width:800px;">{code:"yeyu"}</textarea>
            </div>

            <div>
                <button value="CallDataPipe" onclick="CallDataPipe()">提交</button>
            </div>

            <div>
                <h6>返回结果</h6>

            </div>
            <div id="result" style="border:1px solid #e0dfdf;width:800px;min-height:300px;padding:10px;">

            </div>
        </div>
       


        <div>
          
            <div>
                <div>
                    <h3>调用代码</h3>
                    <p>
                        function CallDataPipe() {  <br/>
                        var url = ApiHref + "/api/invokeProcData?secretKey=" + SecretKey;<br/>
                        var JsonData = {};        <br/>
                        JsonData.MetaData=$("#MetaData").val();<br/>
                        JsonData.functionName=$("#actionname").val();    <br/>   
                        $.post(url, JsonData, function (response) {<br/>
                            $("#result").html(JSON.stringify(response));<br/>
                            console.log(response);<br/>
                            alert(response);         <br/>   
                        }, "json");<br/>
                    }<br/>
                    </p>
                </div>

                <div>
                    <h3>输入参数</h3>
                    <p>
                        SecretKey:必填，此项为调用API的秘钥<br />
                        ActionCode:必填，此项为调用API的后台方法<br />
                       <strong style="color:#f00;"> MetaData:可为空，有值时必须要求为Json字符串</strong><br />
                    </p>
                </div>
                <div>
                    <h3>返回值</h3>
                    <i>返回值为Json对象</i>
                    <p>
                        {"ResultCode":"success","ResultMessage":"successfull","MetaData":{}}
                    </p>
                    <p>
                        MetaData:返回的是Json对象，<strong style="color:#f00;">根据不同的方法返回不一样的json对象</strong><br />
                        ResultCode:结果代码<br />
                        ResultMessage:执行方法返回的消息<br />
                    </p>
                </div>
            </div>
        </div>

        <div style="border-top:5px solid #319616; margin:20px 0px">
            <h1>上传文件</h1>
            <div>
                请选择上传文件:
                <input type="file" id="upload1" multiple="true" /><br />                
                <input type="button" value="上传" onclick="Upload()" />
            </div>
            <div>
                <h3>调用代码</h3>
                <p>
                   function Upload() {<br />
                    var url = ApiHref + "/API/uploadFile?secretKey=" + SecretKey;<br />
                    var formData = new FormData();<br />
                    for(i=0;i<$("#upload1")[0].files.length;i++){<br />
         formData.append("inputFile", $("#upload1")[0].files[i]);<br />
		}   <br />
                    $.ajax({<br />
                        url: url,<br />
                        type: 'POST',<br />
                        data: formData,<br />
                        processData: false,<br />
                        contentType: false,<br />
                        dataType: "json",<br />
                        beforeSend: function () {<br />
                            console.log("正在进行，请稍候");<br />
                        },<br />
                        success: function (response) {<br />
                            alert(response);   <br />             
                        },<br />
                        error: function (responseStr) {<br />
                            console.log("error");<br />
                        }<br />
                    });<br />
                }<br />
                </p>
            </div>
            <div>
                <h3>传入参数</h3>
                <p>
                    secretKey:必填，此项为调用API的秘钥<br />
                    <i>请参考案例上传</i>
                </p>
            </div>
            <div>
                <h3>返回结果</h3>
               <div id="uploadResult" style="border:1px solid #e0dfdf;width:800px;min-height:100px;padding:10px;">
                  
               </div>
            </div>

            <div>
                <h3>返回参数说明</h3>
                返回参数说明：<br/>
           
          <p>
                 {"ResultCode":true,"ResultMessage":"upload successfully.",<br />    
                    "MetaData":{"url":"http://localhost:3000/files/upload/",<br />    
                    "files":[{"fileName":"20175151814516080.jpg"}],<br />    
                    "imgsize":[100,200,300,400]}<br />    
                }<br />  
                    </p>
                    <p>
                       
                        ResultCode:结果代码<br />
                        ResultMessage:执行方法返回的消息<br />
                        MetaData:返回的是Json对象，url：问文件地址目录，files数组为此次上传的文件名称，imagesize:为所支持的缩略图尺寸<br/>
                        访问原图路径加文件名称：http://localhost:3000/files/upload/20175151814516080.jpg<br/>
                        访问对应尺寸的缩略图，在原图前加尺寸<br/>
                        如要访问200px的缩略图即可：http://localhost:3000/files/upload/<storng style="color:#f00">200</storng>20175151814516080.jpg
                    </p>
            </div>
        </div>
        <div style="border-top:5px solid #319616; margin:10px 0px;">
            <h1>删除文件</h1>
            <div>
                文件名称
                <br />
                <input type="text" id="filename"  style="width:800px;height:30px;" /><br /><br />
                <input type="button" value="删除" onclick="fileRomove()" />
            </div>
            <div>
                <h3>调用代码</h3>
                <p>
                    function fileRomove() {<br />
                        var url = ApiHref + "/API/deleteFile?secretKey=" + SecretKey;<br />
                        var JsonData = {};<br />
                        JsonData.SecretKey = SecretKey;<br />
                        JsonData.filename = $("#filename").val();<br />
                        $.post(url, JsonData, function (response) {<br />
                            $("#deleteResult").html(JSON.stringify(response));<br />
                            console.log(response);<br />
                            alert(response);<br />
                        }, "json");<br />
                    }    <br />
                </p>
            </div>
            <div>
                <h3>传入参数</h3>
                <p>
                    secretKey:必填，此项为调用API的秘钥<br />
                    filename:必填，文件名称<br />                    
                </p>
            </div>
            <div>
                <h3>返回参数</h3>
               <div id="deleteResult" style="border:1px solid #e0dfdf;width:800px;min-height:100px;padding:10px;">
                  
               </div>
            </div>   
            <div>
                <h3>返回参数说明</h3>
                <p>{"ResultCode":"success","ResultMessage":"successfull","MetaData":{}}</p>
                <p>ResultCode:true,表示删除成功<br /> 
                ResultCode:false,表示删除失败<br /> 
                </p>
            </div>        
        </div>
         
         </div>
        </div>
    </div>

  
</div>
     <script type="text/javascript" src="js/jquery-2.2.1.min.js"></script>
     <script>
    var SecretKey = 'shisanshao@cc.com';
    var ApiHref = 'http://www.fjyclound.cn';
     
    function CallDataPipe() {  
        var url = ApiHref + "/api/invokeProcData?secretKey=" + SecretKey;
        var JsonData = {};        
        JsonData.MetaData=$("#MetaData").val();
        JsonData.functionName=$("#actionname").val();       
        $.post(url, JsonData, function (response) {
            $("#result").html(JSON.stringify(response));
            console.log(response);
            alert(response);            
        }, "json");
    }


    function Upload() {
        var url = ApiHref + "/API/uploadFile?secretKey=" + SecretKey;
        var formData = new FormData();
		for(i=0;i<$("#upload1")[0].files.length;i++){
         formData.append("inputFile", $("#upload1")[0].files[i]);
		}
        //formData.append("inputFile", $("#upload2")[0].files[0]);       
        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            beforeSend: function () {
                console.log("正在进行，请稍候");
            },
            success: function (response) {              
                $("#uploadResult").html(JSON.stringify(response));
                 console.log(response);
                 alert(response);       
            },
            error: function (responseStr) {
                console.log("error");
            }
        });
    }


    function fileRomove() {
        var url = ApiHref + "/API/deleteFile?secretKey=" + SecretKey;
        var JsonData = {};
        JsonData.SecretKey = SecretKey;
        JsonData.filename = $("#filename").val();
        $.post(url, JsonData, function (response) {
             $("#deleteResult").html(JSON.stringify(response));
            console.log(response);
            alert(response);
        }, "json");
    }    
   
</script>
</body>
</html>